<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="echarts.js"></script>
    <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
</head>
<body>
<div id="first" style="width:700px;height:400px;"></div>
<div id="three" style="width:700px;height:400px;">
</div>
<div id="1" style="width:700px;height:400px;"></div>
<script type="text/javascript">
    var mychart = echarts.init(document.getElementById('first'));
    var option = 
    {
    title:{
    text:'城市出租率',
    subtext:'出租率前十的城市',
    textstyle:{
    color:'red',
    fondweight:'bold'
    }
    },
    tooltip:{},
    xAxis:{
    type:'category',
    name:'城市名称'
    },
    yAxis:{
    type:'value',
    name:'出租率'
    },
    dataset:{
    source:[
    ['product','出租率'],
    // {% for x in c%}
    // ['{{x['name']}}','{{x['avg']}}']
    // {% endfor %}
    ['阿里','0.37'],
    ['东莞','0.13'],
    ['相关','0.27'],
    ]
    },
    series:[
    {
    type:'bar'
    }
    ]};
    mychart.setOption(option);



    var geoCoordMap = {
        "阿克苏":[80.16,40.10],
        "阿拉尔":[80.30,40.22],
        "阿勒泰":[85.31,45.00],
        "阿坝":[100.00,30.50],
        "阿拉善盟":[97.10,37.24],
        "阿里":[86.20,35.52],
        "安康":[108.00,31.42],
        "蚌埠":[116.45,32.43],
        "安庆":[115.16,29.47],
        "鞍山":[122.85,41.12],
        "安顺":[105.13,25.21],
        "安阳":[114.35,36.1],
        "白城":[121.38,44.18],
        "白山":[126.7,41.21],
        "百色":[104.28,22.51],
        "白沙":[109.02,18.56],
        "白银":[103.33,35.33],
    }
    var meth = function(data){
    var res = [];
    for (var j=0;j <data.length;j++){
     var geocoord = geoCoordMap[data[j].name];
       if(geocoord){
        res.push(geocoord.concat(data[j].value));
        };
    }
    return res;
    };


    var chart2 = echarts.init(document.getElementById('1'));
    var option = {
    backgroundColor: '#404a59',
    title:{
    text:'热力散点图',
    left:'center'
    },
    tooltip:{
        trigger: 'item',},
    legend:{
    data:['间夜'],
    left:'right',
    top:'bottom',
    textStyle:{
    color:'white'
    },
    },
    visualMap:{
    mix:0,
    max:40,
    splitNumber:5,
    color:['purple','#eac736','#50a3ba'],
    textStyle:{
    color:'white'
    },
    },
    // dataset:{
    //     source:[
    //     meth(
    //     [{'name': '阿坝', 'value': 34.06}, 
    //     {'name': '阿克苏', 'value': 24.93}, 
    //     {'name': '阿拉尔', 'value': 11.71}, 
    //     {'name': '阿拉善盟', 'value': 17.13}, 
    //     {'name': '阿勒泰', 'value': 11.27}, 
    //     {'name': '阿里', 'value': 6.14}, 
    //     {'name': '安康', 'value': 20.57}, 
    //     {'name': '安庆', 'value': 18.0}, 
    //     {'name': '鞍山', 'value': 26.36}, 
    //     {'name': '安顺', 'value': 24.31}, 
    //     {'name': '安阳', 'value': 27.97}, 
    //     {'name': '白城', 'value': 17.46}, 
    //     {'name': '百色', 'value': 22.35}, 
    //     {'name': '白沙', 'value': 12.0}, 
    //     {'name': '白山', 'value': 12.38}, 
    //     {'name': '白银', 'value': 20.67}, 
    //     {'name': '蚌埠', 'value': 26.51}]
    // ),
    //     ]
    // },
    geo:{
    roam:true,
    map:'china',
    label:{
    emphasis:{
    show:false
    }
    },
    itemStyle:{
    areaColor:'white',
    borderColor:'black',
    emphasis:{
    areaColor:'#2a333d',
    },
    }
    },
    series:[{
    name:'间夜',
    type:'effectScatter',
    // showEffectOn: 'render',
    coordinateSystem:'geo',
    // data :meth(
    //     [{'name': '阿坝', 'value': 34.06}, 
    //     {'name': '阿克苏', 'value': 24.93}, 
    //     {'name': '阿拉尔', 'value': 11.71}, 
    //     {'name': '阿拉善盟', 'value': 17.13}, 
    //     {'name': '阿勒泰', 'value': 11.27}, 
    //     {'name': '阿里', 'value': 6.14}, 
    //     {'name': '安康', 'value': 20.57}, 
    //     {'name': '安庆', 'value': 18.0}, 
    //     {'name': '鞍山', 'value': 26.36}, 
    //     {'name': '安顺', 'value': 24.31}, 
    //     {'name': '安阳', 'value': 27.97}, 
    //     {'name': '白城', 'value': 17.46}, 
    //     {'name': '百色', 'value': 22.35}, 
    //     {'name': '白沙', 'value': 12.0}, 
    //     {'name': '白山', 'value': 12.38}, 
    //     {'name': '白银', 'value': 20.67}, 
    //     {'name': '蚌埠', 'value': 26.51}]
    // ),
    //  symbolSize:10,
    //  label:{
    //  show: true
    //  }
     }
    ]
    };
    chart2.setOption(option)

var chart1 =echarts.init(document.getElementById('1'));
var option1 = {
title:{
text:'1234',
subtext:'14728'
},
tooltip:{
show:true
},
xAxis:{
type:'category'
},
yAxis:{
type:'value'
},
dataset:{
source:[
['product','数量']
// {% f x in a %}
// ['{{x['profession']}}','{{x['value']}}'],
// {%endfor%}
]
},
series:[
{
type:'bar'
}
]
}
chart1.setOption(option1)
</script>
</body>
</html>